import { reactive, ref, defineComponent } from 'vue';
import PropTypes from '../types';
import { CaretDownOutlined } from '@ant-design/icons-vue';
import './style/buttonGroup.less';

interface ButtonTextMap {
  AND: string;
  OR: string;
}

export default defineComponent({
  name: 'AddConditionButton',
  props: {
    buttonType: PropTypes.string.def(''),
  },
  emits: ['click'],
  setup(props, { emit }) {
    // 页面按钮可显示的map
    const buttonTextMap: ButtonTextMap = reactive({
      AND: `添加${props.buttonType}(且)`,
      OR: `添加${props.buttonType}(或)`,
    });
    // 页面按钮可选择的map
    const optionsMap: ButtonTextMap = reactive({
      AND: `且${props.buttonType}`,
      OR: `或${props.buttonType}`,
    });
    const selectedType = ref('AND');
    // 点击弹出选择框
    const handleButtonClick = () => {
      emit('click', selectedType.value);
    };
    // 点击选择类型 and / or
    const handleMenuClick = (currentOption) => {
      selectedType.value = currentOption.key;
      emit('click', selectedType.value);
    };

    // 下拉菜单
    const menu = (
      <aMenu onClick={handleMenuClick}>
        {Object.keys(optionsMap).map((key: string) => (
          <aMenuItem key={key}>
            <span class={['menu-item', selectedType.value === key ? 'menu-item-active' : '']}>
              {optionsMap[key]}
            </span>
          </aMenuItem>
        ))}
      </aMenu>
    );
    return () => (
      <div>
        <aDropdownButton
          onClick={handleButtonClick}
          overlay={menu}
          icon={<CaretDownOutlined />}
          trigger="click"
        >
          <span>{buttonTextMap[selectedType.value]}</span>
        </aDropdownButton>
      </div>
    );
  },
});
